<template>
  <!-- 分院详情 -->
  <div class="homepage">
    <mt-header fixed title="分院详情" style="background:#ffa200; color:#fff">
      <router-link to slot="left">
        <mt-button icon="back" v-if="iosShow" @click="$router.go(-1)"
          >返回</mt-button
        >
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <div class="curr_back">
      <img src="../../../static/image/currentduan.png" />
    </div>
    <div class="home_tab">
      <div class="tab_name">{{ this.branchName }}</div>
      <form action="javascript:return true;">
        <input
          type="serch"
          placeholder="搜索用户名跳转至用户"
          v-model="user"
          @keyup.enter="searchGoods"
        />
      </form>
      <!-- @keypress="searchGoods" -->
      <img src="../../../static/image/CombinedShape.png" class="tab_imag" />
    </div>
    <div v-for="(item, index) in arr" :key="index">
      <div class="hom_back">
        <div class="nav">
          <div
            style="background:#fff;height:1.65rem;border-radius:0.20rem 0.20rem 0 0;box-sizing: border-box;"
          >
            <span style="margin-left:0.30rem;font-size:0.32rem;color:#212C67;"
              >业务总览</span
            >
            <div class="nav_item" style="font-size:0.24rem;">
              <span>销售总额</span>
              <span>昨日销售</span>
            </div>
          </div>
          <div class="nav_item1">
            <div>{{ item.grossIncome / 100 }}</div>
            <div
              style="height:0.80rem;width:0.005rem;border-left:0.005rem solid #ccc;margin-top: 0.20rem;"
            ></div>
            <div>+{{ item.yesterdayIncome / 100 }}</div>
          </div>
        </div>
      </div>
      <div class="total">
        <div class="total_item">
          <span>用户总数</span>
          <div>{{ item.userCount }}</div>
        </div>
        <div class="total_item">
          <span>付费用户总数</span>
          <div>{{ item.paymentUserCount }}</div>
        </div>
      </div>
    </div>
    <div class="ranking">
      <div class="fenbu">
        <span style="margin-left:0.45rem;font-size:0.32rem;">业务员列表</span>
        <div bindtap="Openmore" @click="gomore">更多>></div>
      </div>
      <div style="margin-bottom:2rem;">
        <div
          class="ran_oitem"
          v-for="(item, index) in salesmanList"
          :key="index"
          @click="listdetails(item.openId)"
        >
          <span
            style="margin-left:0.32rem;width:3.58rem;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;"
            >{{ item.nickName }}</span
          >
          <span style="margin-right:0.53rem;color:#666666;"
            >开单:{{ item.directPromotionQuantity }}</span
          >
        </div>
      </div>
    </div>
    <div class="ranking" v-show="nothing" style="margin-bottom:2rem;">
      <img src="../../../static/image/nothing.png" alt />
      <div class="ranking_zi">没有更多数据</div>
    </div>
  </div>
</template>
<script>
import { branch, Salesmanlist } from "../../api/api";
import querystring from "query-string";
import { Toast } from "mint-ui";

export default {
  name: "Genbranchdeta",
  data() {
    return {
      arr: [],
      user: "",
      salesmanList: [],
      branchName: "",
      branchId: "",
      nothing: false,
      iosShow: false
    };
  },
  created() {
    this.branchId = this.$route.query.branchId;
    this.branchName = this.$route.query.branchName;
    this.Phonetype();
  },
  methods: {
    branchgailan() {
      let that = this;
      that.bus.$emit("loading", true); //开始
      let params = {
        branchId: that.branchId
      };
      params = querystring.stringify(params);
      let a = localStorage.getItem("token");
      a = JSON.parse(a);
      branch(params, a).then(res => {
        // console.log(res)
        if (res.data.code == 0) {
          Toast({
            message: "登录失败",
            iconClass: "icon icon-success"
          });
        } else {
          let Arr = res.data.data;
          that.arr.push(Arr);
          that.salesmanList = res.data.data.salesmanList;
          //  console.log(that.salesmanList)
          if (that.salesmanList.length == 0) {
            this.nothing = true;
          } else {
            this.nothing = false;
          }
        }
        that.bus.$emit("loading", false); //结束
      });
    },
    //判断是安卓还是ios
    Phonetype() {
      let ua = navigator.userAgent;
      console.log(ua); //Ios终端
      //Android终端
      //let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
      // console.log(isAndroid)
      let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (!isiOS) {
        this.iosShow = true;
      }
    },
    //搜索
    salesman() {
      let that = this;
      that.bus.$emit("loading", true); //开始
      let params = {
        branchId: that.branchId,
        pageNo: 1,
        pageSize: 20,
        nickName: that.user
      };
      params = querystring.stringify(params);
      // console.log(params)

      let a = localStorage.getItem("token");
      a = JSON.parse(a);
      Salesmanlist(params, a).then(res => {
        // console.log(res)
        if (res.data.code == 1) {
          that.Salesmanlist = res.data.data;
        } else {
          Toast(res.data.message);
        }
        that.bus.$emit("loading", false); //结束
      });
    },
    listdetails(item) {
      this.$router.push({
        path: "/Generalhospital/branchdetail",
        query: { openId: item }
      });
    },
    //回车键触发搜索
    searchGoods(event) {
      if (event.keyCode == 13) {
        //如果按的是enter键 13是enter
        event.preventDefault(); //禁止默认事件（默认是换行）
        // console.log(event.target.value)
        if (event.target.value == "") {
          Toast({
            message: "请输入搜索内容",
            iconClass: "icon icon-success"
          });
          return;
        } else {
          this.salesman();
        }
      } else {
        Toast({
          message: "请按回车搜索",
          iconClass: "icon icon-success"
        });
        return;
      }
    },
    //跳转更多
    gomore() {
      // console.log(this.$route.params.branchId,this.$route.params.branchName)
      this.$router.push({
        path: "/Generalhospital/more",
        query: { branchId: this.branchId, branchName: this.branchName }
      });
    }
    // //头部返回
    // clickRouter() {
    //   // console.log(this.branchId,this.branchName)
    //   this.$router.push({
    //     name: "Gbranch",
    //     params: { branchId: this.branchId, branchName: this.branchName }
    //   });
    // }
  },
  mounted() {
    this.branchgailan();
  }
};
</script>
<style lang="scss" scoped>
.homepage {
  width: 7.5rem;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}

.curr_back {
  width: 100%;
  height: 1.7rem;
  position: relative;
}
.curr_back img {
  width: 100%;
  height: 100%;
}

.home_tab {
  width: 100%;
  height: 1.4rem;
  display: flex;
  align-items: center;
  background: #fff;
  box-sizing: border-box;
  padding: 0.29rem;
  position: relative;
}
.home_tab .tab_name {
  font-size: 0.3rem;
  width: 3.52rem;
}
.home_tab input {
  width: 3.52rem;
  height: 0.72rem;
  font-size: 0.26rem;
  box-sizing: border-box;
  padding: 0.2rem;
  background: #dfe2ee;
  border: none;
}
.tab_imag {
  position: absolute;
  width: 0.26rem;
  height: 0.26rem;
  top: 0.58rem;
  right: 0.45rem;
}

.hom_back {
  width: 100%;
  height: auto;
  margin-top: 0.3rem;
}

.nav {
  width: 6.94rem;
  height: auto;
  margin: auto;
  /* border: 1px solid black; */
  border-radius: 0.2rem;
  box-shadow: 0 0.04rem 0.32rem 0.1rem rgba(39, 52, 125, 0.25);
}
.nav_item {
  display: flex;
  justify-content: space-between;
  margin: 0.3rem 0.3rem 0 0.4rem;
}
.nav_item1 {
  display: flex;
  justify-content: space-between;
  height: 1.16rem;
  background: #e8ebf5;
  border-radius: 0 0 0.2rem 0.2rem;
  line-height: 1rem;
  padding: 0 0.2rem 0 0.2rem;
  font-size: 0.42rem;
}

.total {
  width: 100%;
  /* border:1rpx solid black; */
  height: 2rem;
  margin: auto;
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  // padding-left: 0.20rem;
  // padding-right: 0.20rem;
}
.total_item {
  width: 3.42rem;
  height: 1.78rem;
  /* border: 1rpx solid black; */
  text-align: center;
  background: #fff;
  padding-top: 0.21rem;
  box-shadow: 0 0.04rem 0.32rem 0 rgba(39, 52, 125, 0.25);
  border-radius: 0.08rem 0.08rem 0.08rem 0.08rem;
}
.total_item span {
  font-size: 0.24rem;
  /* margin-top: 30rpx; */
}

.total_item div {
  color: #ffb400;
  font-size: 0.42rem;
  // margin-top: 0.25rem;
}
.ranking {
  width: 100%;
  height: auto;
  margin-top: 0.58rem;
  // margin-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  img {
    margin: auto;
    width: 3.06rem;
    height: 2rem;
    margin-top: 0.1rem;
  }
}
.ranking_zi {
  text-align: center;
  margin-top: 0.1rem;
  font-size: 0.28rem;
}
.fenbu {
  display: flex;
  justify-content: space-between;
}
.fenbu div {
  margin-right: 0.3rem;
  font-size: 0.26rem;
}
.ran_oitem {
  width: 6.84rem;
  margin: auto;
  border: 0.02rem solid #cfcfcf;
  height: 1.1rem;
  line-height: 1.1rem;
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-size: 0.26rem;
  box-shadow: 0 0.04rem 0.28rem 0 rgba(39, 52, 125, 0.05);
  border-radius: 0.16rem;
}
</style>